<template>
    <div>
        <el-dialog
                title="编辑会话"
                :visible.sync="visible"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                @close="onCancel"
                append-to-body
                width="685px"
        >
            <el-form ref="form" :model="formData" :rules="rules" label-width="100px" inline>
                <el-form-item label="名称：" prop="name">
                    <el-input v-model="formData.name"/>
                </el-form-item>
                <el-form-item label="主机：" prop="host">
                    <el-input v-model="formData.host"/>
                </el-form-item>
                <el-form-item label="端口号：" prop="port">
                    <el-input-number
                            v-model="formData.port"
                            :controls="false"
                            :min="1"
                            :max="65535"
                            class="text-left"
                            style="width: 100%;"/>
                </el-form-item>
                <el-form-item label="用户名：" prop="username">
                    <el-input v-model="formData.username"/>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="formData.password" type="password" show-password style="width: calc(100% - 15px)"/>
                </el-form-item>
            </el-form>

            <div slot="footer">
                <el-button type="primary" @click="onSave">确 定</el-button>
                <el-button @click="onCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import {add as addSession, edit as editSession} from '@/api/session-api'

    const defaultData = {
        host: '',
        port: 22,
        username: '',
        password: ''
    }

    export default {
        name: "session-list-data-form",

        data() {
            return {
                visible: false,

                formData: JSON.parse(JSON.stringify(defaultData)),

                rules: {
                    name: [
                        {required: true, trigger: 'blur', message: '请填写名称'},
                        {min: 1, max: 20, trigger: 'blur', message: '长度在1 ~ 20个字符'}
                    ],

                    host: [
                        {required: true, trigger: 'blur', message: '请填写IP地址或域名'},
                        // {pattern: /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/, trigger: 'blur', message: '请填写正确的IP地址'}
                    ],

                    port: [
                        {required: true, trigger: 'blur', message: '请填写端口号'},
                    ],

                    username: [
                        {required: true, trigger: 'blur', message: '请填写登录用户名'},
                    ],

                    password: [
                        {required: true, trigger: 'blur', message: '请填写登录密码'},
                    ]
                }
            }
        },

        methods: {

            open(data) {
                this.visible = true

                if (data) {
                    this.formData = JSON.parse(JSON.stringify(data))
                }
            },

            onCancel() {
                this.visible = false
                this.formData = JSON.parse(JSON.stringify(defaultData))
            },

            onSave() {
                this.$refs.form.validate(b => {
                    if (!b) {
                        return
                    }

                    if (this.formData.id) {
                        this.doEdit().then(() => {
                            this.onCancel()
                            this.$emit('load-data')
                        })
                    } else {
                        this.doSave().then(() => {
                            this.onCancel()
                            this.$emit('load-data')
                        })
                    }
                })
            },

            doSave() {
                return addSession(this.formData)
            },

            doEdit() {
                return editSession(this.formData)
            }

        }
    }
</script>
